@charset "utf-8";

$legacy-support-for-ie: false !default;
$filter:true !default;


 //
@mixin last_w($all:$width,$first:0){
  width: $all - $first;
}

@mixin w_minus($key,$value1:0,$value2:0,$rate:1){
  #{$key}:($value1 - $value2)/$rate;
}

// 总的width ,height; 根据padding计算出相应的值，padding是个数据
// 引用 @include wh_padding(*px, *px, *px|*px *px|*px *px *px|*px *px *px *px);
//

@mixin wh_padding($width, $height, $padding){
    $len: length($padding);

    @if $len == 1 {
        height: $height - 2 * nth($padding,1);
        width: $width - 2 * nth($padding,1);
        padding: $padding;
    } @else if length($padding) == 2 {
        height: $height - 2 * nth($padding,1);
        width: $width - 2 * nth($padding,2);
        padding: $padding;
    } @else if length($padding) == 3{
        height: $height - nth($padding,1) - nth($padding,3);
        width: $width - 2 * nth($padding,2);
        padding: $padding;
    } @else if length($padding) == 4{
        height: $height - nth($padding,1) - nth($padding,3);
        width: $width - nth($padding,2) - nth($padding,4);
        padding: $padding;
    }
}

//
//  透明度  小数;
//

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  @if $filter{
    filter: alpha(opacity=$opacity);
  }
}
//
//  背景透明度处理
//  $color 可以是数组RGB,也可以是#ABCDEF---十六进制的表示
//  $op 必须是小数

@mixin bg_opacity($color, $op){
    
    @if length($color) == 1{    // input color in 16
        background:$color;
        filter:alpha(opacity = $op *100);    
        background:rgba($color,$op);
    }
    
    @else if length($color) == 3{   // input color in RGB
        background:rgb(nth($color,1),nth($color,2),nth($color,3));
        filter:alpha(opacity = $op *100);
        background:rgba(nth($color,1),nth($color,2),nth($color,3),$op);

    }
}

//
//  css3 不同浏览器兼容处理
//

@mixin c3($key , $value){
    -webkit-#{$key}: $value;
    -moz-#{$key}: $value;
    -o-#{$key}: $value;
    #{$key}: $value;
}

//
// display-inline 兼容IE6,IE7
// 提供一个跨浏览器的方法来实现`display:inline-block
//
//@mixin inline_box_p{
//  font-size: 0;
//}
$inline-block-alignment: middle !default;//设置一个默认的对齐方式
@mixin display-inline($alignment: $inline-block-alignment) {
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment;
  }
  @if $legacy-support-for-ie {
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }
}

%display-inline{
  @include display-inline();
}
//水平居中 ---单个元素使用
@mixin horizontal-center {
  margin-left: auto;
  margin-right: auto;
}
//水平居中 ---多个元素使用
%horizontal-center {
  @include horizontal-center;
}
//
//  float 解决IE6下双margin
//

@mixin float($side:left){
  float: unquote($side);
  @if $legacy-support-for-ie {
    _display:inline;
  }
}
//左浮动

@mixin pull-left{
  @include float(left);
}

%pull-left {
  @include float(left);
}


//右浮动

@mixin pull-right{
  @include float(right);
}

%pull-right {
  @include float(right);
}

//
// reset-float 重置掉float
//
@mixin reset-float($display:block){
    float:none;
    display: $display;
}

//清除浮动clearfix
@mixin clearfix {
  @if $legacy-support-for-ie {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
    overflow: hidden;
  }
}

%clearfix {
  @include clearfix;
}

//1.浏览器和屏幕阅读器都隐藏元素

@mixin hidden {
  display: none !important;
  visibility: hidden;
}

%hidden {
  @include hidden;
}

//2.仅浏览器隐藏，屏幕阅读器不被隐藏

@mixin visuallyhidden {
  @if $legacy-support-for-ie {
    clip: rect(0,0,0,0);
  }
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  ////扩展了`.visuallyhidden`，充许`.focusable`元素通过键盘获取
  &.focusable:active,
  &.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
}

%visuallyhidden {
  @include visuallyhidden;
}

//3.隐藏元素，但布局中占有空间

@mixin invisible {
  visibility: hidden;
}

%invisible {
  @include invisible;
}
//截取文本text-overflow  单行文本
@mixin singleline-ellipsis($substract:0){//`$substract`单位为%
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100% - $substract;
}

%singleline-ellipsis {
  @include singleline-ellipsis;
}


//多行
@mixin lines-ellipsis($num){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}
//禁用样式disabled
@mixin disabled($bgColor: #e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}


//最小高度min-height
@mixin min-height($height){
  min-height: $height;
  height: auto !important;
  @if $legacy-support-for-ie {
    _height: $height;
  }
}

//absolut center center
@mixin absolute_center($w,$h){
  position: absolute;
  left: 50%;
  top: 50%;
  width: $w;
  height: $h;
  margin-top: -($h/2);
  margin-left: -($w/2);
}

//
//  css3特效，渐变背景色
//  $direction 方向：left|top|right|bottom|angle|数组 type,angle
//  $colors 颜色数组 ---需要赋到一个变量里
// 

@mixin bg-linear-gradient($colors, $diretion:top ){
    @if length($colors) == 2{
        $c1 : nth($colors,1);
        $c2 : nth($colors,2);
        background-color:mix($c1,$c2);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$c1}, endColorstr=#{$c2});
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$c1}, endColorstr=#{$c2})";
        @if $diretion == top{
            background: -webkit-gradient(linear, left top, left bottom, from($c1), to($c2));        
        } @else if $diretion == left{
            background: -webkit-gradient(linear, left top, right top, from($c1), to($c2));              
        } @else if $diretion == lefttop{
            background: -webkit-gradient(linear, left top, right bottom, from($c1), to($c2));       
        } @else if $diretion == righttop{
            background: -webkit-gradient(linear, right top, left bottom, from($c1), to($c2));       
        }
    }
    background: -webkit-linear-gradient($diretion, $colors);
    background: -moz-linear-gradient($diretion, $colors);
    background: -ms-linear-gradient($diretion, $colors);
    background: -o-linear-gradient($diretion, $colors);
    background: linear-gradient($diretion, $colors);

}




//
//  三角形 -e正三角形， -r直三角形
//  $name: up-e, down-e, left-e, right-e ; up-r-l, up-r-r, down-e-l, down-e-r;
//  $width: 三角形的宽，计算是会/2，半个border在值
//  $height: 三角形的高
//  $line: solid dotted ...
//  $bgColor: IE6下的背景色，只用于IE6
//  带边框的三角形可以用两个三角定位来实现

@mixin triangle( $name, $width, $height, $line: solid, $color: #333, $bgColor:#fff){
    
    width: 0;
    height: 0;
    _zoom:1;
    overflow: hidden;
    display:inline-block;
    $border-w: $width / 2 solid transparent;
    $border-h: $height / 2 solid transparent;
    $border-w6: $width / 2 solid $bgColor;
    $border-h6: $height / 2 solid $bgColor;
    $border-fw: $width $line $color;
    $border-fh: $height $line $color;
    $border-hw: $width / 2 $line $color;
    $border-hh: $height / 2 $line $color;

    @if $name == up-e {  //正，上三角
        border-top: 0;
        border-left: $border-w;
        border-right: $border-w;
        _border-left: $border-w6;
        _border-right: $border-w6;
        border-bottom: $border-fh;
    } @else if $name == down-e {    //正，下三角
        border-top: $border-fh;
        border-left: $border-w;
        border-right: $border-w;
        _border-left: $border-w6;
        _border-right: $border-w6;      border-bottom: 0;
    } @else if $name == left-e {    //正，左三角
        border-top: $border-h;
        border-left: 0;
        border-right: $border-fw;
        border-bottom: $border-h;
        _border-top: $border-h6;
        _border-bottom: $border-h6;
    } @else if $name == right-e {   //正，右三角
        border-top: $border-h;
        border-left: $border-fw;
        border-right:0;
        border-bottom: $border-h;
        _border-top: $border-h6;
        _border-bottom: $border-h6;
    } @else if $name == up-r-l { //直 左 上三角
        border-top: $border-h;
        border-left: $border-w;
        border-right: $border-hw;
        border-bottom: $border-hh;
    } @else if $name == up-r-r { //直 右 上三角
        border-top: $border-h;
        border-left: $border-hw;
        border-right: $border-w;
        border-bottom: $border-hh;
    } @else if $name == down-r-l { //直 左 下三角
        border-top: $border-hh;
        border-left: $border-w;
        border-right: $border-hw;
        border-bottom: $border-h;
    } @else if $name == down-r-r { //直 左 下三角
        border-top: $border-hh;
        border-left: $border-hw;
        border-right: $border-w;
        border-bottom: $border-h;
    }
}

//
//  变灰
//

@mixin gray{
    filter:gray;
    -o-filter:grayscale(1);
    -ms-filter:grayscale(1);
    -moz-filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    filter:url("#grayscale");
    filter:grayscale(100%);
}

//
//  正常
//  

@mixin normal{
    filter:none;
    -o-filter:grayscale(0);
    -ms-filter:grayscale(0);
    -moz-filter:grayscale(0);
    -webkit-filter:grayscale(0);
    filter:grayscale(0);
}

//
//  圆角设置，$direction选填，all|top|right|bottom|left|right|top-left|top-right|bottom-right|bottom-left
//  domo: @include border-radius(10px, top left);
//

@mixin border-radius($size, $direction:all){
    @if $direction == all{
        border-radius:$size;
    } @else if length($direction) == 2 {
        border-#{nth($direction,1)}-#{nth($direction,2)}-radius:$size;
    }
    @else if $direction == top or $direction == bottom{
        border-#{$direction}-left-radius:$size;
        border-#{$direction}-right-radius:$size;
    } @else if $direction == right or $direction == left{
        border-top-#{$direction}-radius:$size;
        border-bottom-#{$direction}-radius:$size;
    }
}


@mixin line_height($height,$line-height: $height){
    height: $height;
    line-height: $line-height;
}

// btn
// @include simple-btn;
// @include simple-btn;
// @include simple-btn(true);
// @include simple-btn($bgColor:$green);
$bgimg:false;
@mixin base_btn($bgimg:$bgimg,$bgColor: $bgColor, $textColor:#fff,$fontSize:20px,$inlineblock:true){

  cursor: pointer;
  border:0 none;
  outline: none;
  text-align: center;
  color: $textColor;
  @if($inlineblock){
    @include display-inline();
  }
  @if($bgimg){

  }@else{
    background-color: $bgColor;
  }
  font-size: $fontSize;
}


//display:flex
@mixin display_flex($flex: flex){
  display: -webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@mixin flex($num){
  -webkit-box-flex: $num;
  -webkit-flex: $num;
  -ms-flex: $num;
  flex: $num;
  display: block;
  position: relative;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  //    max-width: 100%;
  //    width: 0;
}

@mixin flex-cell($width) {
  -webkit-flex-basis: $width;
  -ms-flex-preferred-size: $width;
  flex-basis: $width;
  max-width: $width;
  width: auto!important
}

//图片，背景图片的响应式布局Response
@mixin  response_pic_wrap($width:100%,$height:100%){
  position: relative;
  :before{
    content: '';
    display: block;
    width: $width;
    padding-top: $height;
  }
  .pci_box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: $height;
    background-color: #fff;
    img{
      max-width: 100%;
      height: auto;
      width:100%;
      max-height: 100%;
      vertical-align: top;
    }
  }
}



//图片处理
$mainIcon:'../img/sprite_icon.png';


%bgimg{
  background-image:  url($mainIcon);
  background-repeat: no-repeat;
}


@mixin default_bg($x:0,$y:0){
  @extend %bgimg;
  background-position:  $x $y;
}

@mixin sprite_bg($w,$h,$x:0,$y:0){
  @if($w){
    width: $w;
  }
  @if($h){
    height: $h;
  }
  @include default_bg($x,$y);
}


$blueColor: #1493e3; //
$mainColor:#fe4c40;
$colorRed:#ff6060;
$redColor:#e1004a;
$tipColor:#d80303;
$color333:#333;
$color999:#999;
$color666:#666;
$colorccc:#ccc;

$width:1200px;

$mainFontSize:16px;
$borderColor: #d7d7d7; // default border color
$lightborderColor:#dcdcdc;
$bgColor:#f8f8f8;
//.f0_bg{
//  background-color: $bgColor!important;
//}


//图片水平垂直居中
//Picture horizontal vertical center
@mixin pic_hor_ver_center($w,$h:$w){
  width: $w;
  height: $h;
  border: 1px solid $borderColor;
  text-align: center;
  display: table;
  position: relative;
  overflow: hidden;
  line-height: 0;
  @extend %pull-left;
  span{
    width: $w;
    height: $h;
    display: table-cell;
    vertical-align: middle;
  }
  img{
    margin: 0 auto;
    max-width: $w;
    max-height: $h;
  }
}

// 640 *960
//@mixin px2rem($name,$px,$baseline-rem){
//  #{$name} : $px/$baseline-rem *1rem;
//}
//@function pxTorem($px,$baseline-rem:64){
//  @return $px / $baseline-rem * 1rem;
//}


@mixin px2rem($property, $values,$baseline-rem:75) {
  $max: length($values);//返回$values列表的长度值
  $pxValues: '';
  $remValues: '';

//  @for $i from 1 through $max {
//    $value: (nth($values, $i));
//    $baseline-rem: ($baseline-rem);
//    $pxValues: #{$pxValues + $value * $baseline-rem}px;
//
//    @if $i < $max {
//      $pxValues: #{$pxValues + " "};
//    }
//  }

  @for $i from 1 through $max {
    $value: (nth($values, $i));
    $remValues: #{$remValues + $value/$baseline-rem}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

//  #{$property}: $pxValues;
  #{$property}: $remValues;
}

//
//@mixin px2rem($property,$px-values,$baseline-px:64,$support-for-ie:false){
//  //Conver the baseline into rems
//  $baseline-rem: $baseline-px / 1rem * 1;
//  //Print the first line in pixel values
//  @if $support-for-ie {
//    #{$property}: $px-values;
//  }
//  //if there is only one (numeric) value, return the property/value line for it.
//  @if type-of($px-values) == "number"{
//    #{$property}: $px-values / $baseline-rem;
//  }
//  @else {
//    //Create an empty list that we can dump values into
//    $rem-values:();
//    @each $value in $px-values{
//      // If the value is zero or not a number, return it
//      @if $value == 0 or type-of($value) != "number"{
//        $rem-values: append($rem-values, $value / $baseline-rem);
//      }
//    }
//    // Return the property and its list of converted values
//    #{$property}: $rem-values;
//  }
//}

//任何手机屏幕上px的统一
//px2px(font-size, 32);
@mixin px2px($name,$px){
  #{$name}:round($px/2)*1px;
  [data-dpr = "2"] &{
    #{$name}:$px*1px;
  }
  [data-dpr = "2.5"] &{
    #{$name}:round($px*2.5/2)*1px;
  }

  [data-dpr = "2.75"] &{
    #{$name}:round($px*2.75/2)*1px;
  }

  [data-dpr = "3"] &{
    #{$name}:round($px*3/2)*1px;
  }
  [data-dpr = "4"] &{
    #{$name}:round($px*2)*1px;
  }
}

@mixin font-dpr($px){
  @include  px2px(font-size,$px)
}

//
//@mixin font-dpr($font-size){
//  font-size: $font-size;
//
//  [data-dpr="2"] & {
//    font-size: $font-size * 2;
//  }
//
//  [data-dpr="3"] & {
//    font-size: $font-size * 3;
//  }
//}